<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="../static/jquery.min.js"></script>
	</head>
	<style>
		body {
		  margin: 0;
		  background-color: #eee;
		  background-image: url("https://images7.alphacoders.com/938/thumb-1920-938300.jpg");
		  background-repeat: no-repeat;
		  background-position: center;
		  background-size: cover;
		  height: 100vh;
		  overflow: hidden;
		}
.button1 {
  width: 100px;
  height: 50px;
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-weight: 500;
  color: #000;
  background-color: #ffdbd2;
  border: none;
  border-radius: 45px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
  cursor: pointer;
  outline: none;
  }

.button1:hover {
  background-color: #ffcbbc;
  box-shadow: 0px 15px 20px rgba(45, 45, 45, 0.69);
  color: #ffc3c3;
  transform: translateY(-7px);
}

		.overlay {
		  background-color: rgba(255, 255, 255, 0.4);
		  width: 100vw;
		  height: 100vh;
		}

		.card {
		  backdrop-filter: blur(5px);
		  width: 35vh;
		  max-width: 25%;
		  height: 25vh;
		  background-color: rgba(0, 166, 255, 0.3);
		  position: absolute;
		  left: calc(50vw - calc(35vh / 2));
		  top: calc(50vh - calc(55vh / 2));
		  transform: scale(1);
		  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.051),
		    0px 0px 7.2px rgba(0, 0, 0, 0.073), 0px 0px 13.6px rgba(0, 0, 0, 0.09),
		    0px 0px 24.3px rgba(0, 0, 0, 0.107), 0px 0px 45.5px rgba(0, 0, 0, 0.129),
		    0px 0px 109px rgba(0, 0, 0, 0.18);
		}

		.glare-container {
		  width: 100%;
		  height: 100%;
		  overflow: hidden;
		  position: relative;
		}

		.glare {
		  position: absolute;
		  left: 100%;
		  bottom: -50%;
		  width: 150%;
		  height: 150%;
		  background: rgb(255, 255, 255);
		  background: linear-gradient(
		    90deg,
		    rgba(255, 255, 255, 0.1) 0%,
		    rgba(255, 255, 255, 0) 20%
		  );
		  transform: rotateZ(35deg);
		  pointer-events: none;
		  filter: blur(4px);
		}

		.card-1 {
		  left: calc(80vw - calc(35vh / 2));
		  background-color: rgba(255, 255, 127, 0.2);
		}

		.card-2 {
		  left: calc(20vw - calc(35vh / 2));
		  background-color: rgba(255, 255, 127, 0.2);
		}

		.card-3 {
			margin-top: 300px;
			left: calc(20vw - calc(35vh/2));
			background-color: rgba(255, 40, 40, 0.051)
		}

		.card-4 {
			margin-top: 300px;
			left: calc(80vw - calc(35vh/2));
			background-color: rgba(255, 40, 40, 0.051)
		}
		.card-5 {
			margin-top: 300px;

			background-color: rgba(0, 0, 0, 0)
		}
        .a2{
           text-align: center;
            font-size: 1em;
            font-family: Monoton;
        }
		.a1{
		  text-align: center;
		  font-size: 7em;
		  margin-bottom: 0;
		  margin-top: 0;
		  line-height: 1;
		  text-decoration: none;
		  color: #fff;
            margin-left: 32%;
		}

		.a1:nth-child(1) {
		  font-family: Monoton;
		  animation: neon1 1.5s ease-in-out infinite alternate;
		}
        video {        position: fixed;
        right: 0;
        {#min-width: 100%;#}
        min-height: 100%;
            max-width: 100%;
        width: auto;
        height: auto;
        z-index: -999;

    }
	</style>
	<body>
    <video src = "../static/bg12.mp4" type = "video/mp4" autoplay muted loop>

</video>
		<a class="a1" >
		    House Price
		</a>
		<div class="overlay">

		</div>

        <div class="card">
		  <div class="glare-container" style="text-align: center">
                <h2 style="text-align: center;color: ghostwhite;font-size: 20px">城市房价显示</h2>
              <p style="text-align: center;font-family:'宋体' "> 输入城市名称，获取各区域平均房价 </p>
              <p style="text-align: center;"><a href="/SearchText" class="a2"><button class="button1"> 点击前往</button></a></p>
		    <div class="glare">

		    </div>
		  </div>
		</div>

		<div class="card card-1">
		  <div class="glare-container">
               <h2 style="text-align: center;color: ghostwhite;font-size: 20px">根据价格搜索</h2>
              <p style="text-align: center;font-family:'宋体' "> 输入价格区间，获取相应价格的房产信息 </p>
              <p style="text-align: center;"><a href="/searchP" class="a2"><button class="button1"> 点击前往</button></a></p>
              <div class="glare">
		    </div>
		  </div>
		</div>
		<div class="card card-2">
		  <div class="glare-container">
                 <h2 style="text-align: center;color: ghostwhite;font-size: 20px">查看北京各地区房价走势</h2>
              <p style="text-align: center;font-family:'宋体' "> 输入北京各区名称，以空格分隔，获取房价走势外加2个月预测 </p>
              <p style="text-align: center;"><a href="/ZX" class="a2"><button class="button1"> 点击前往</button></a></p>
              <div class="glare">
		    </div>
		  </div>
		</div>
		<div class="card card-3">
			<div class="glare-container">
			  <h2 style="text-align: center;color: ghostwhite;font-size: 20px">根据收入详细匹配房产</h2>
              <p style="text-align: center;font-family:'宋体' "> 输入个人月收入，通过公式预测匹配可接受房产详细信息 </p>
              <p style="text-align: center;"><a href="/searchByIncome" class="a2"><button class="button1"> 点击前往</button></a></p>
                <div class="glare">
			  </div>
			</div>
		</div>
		<div class="card card-4">
			<div class="glare-container">
                <h2 style="text-align: center;color: ghostwhite;font-size: 20px">查看房价热力图</h2>
              <p style="text-align: center;font-family:'宋体' "> 显示全国房价热力图</p>
              <p style="text-align: center;"><a href="/RLT" class="a2"><button class="button1"> 点击前往</button></a></p>

			  <div class="glare">

			  </div>
			</div>
		</div>

		<script>
			var limits = 15.0;

			$(".card").mousemove(function (e) {
			  var rect = e.target.getBoundingClientRect();
			  var x = e.clientX - rect.left; //x position within the element.
			  var y = e.clientY - rect.top; //y position within the element.
			  var offsetX = x / rect.width;
			  var offsetY = y / rect.height;

			  var rotateY = ((offsetX - 0) / (1 - 0)) * (limits - -limits) + -limits;
			  var rotateX = ((offsetY - 0) / (1 - 0)) * (limits - -limits) + -limits;

			  var shadowOffsetX = ((offsetX - 0) / (1 - 0)) * (16 - -16) + -16;
			  var shadowOffsetY = ((offsetY - 0) / (1 - 0)) * (16 - -16) + -16;

			  $(this).css({
			    "box-shadow":
			      (1 / 6) * shadowOffsetX * -1 +
			      "px " +
			      (1 / 6) * shadowOffsetY * -1 +
			      "px 3px rgba(0, 0, 0, 0.051), " +
			      (2 / 6) * shadowOffsetX * -1 +
			      "px " +
			      (2 / 6) * shadowOffsetY * -1 +
			      "px 7.2px rgba(0, 0, 0, 0.073), " +
			      (3 / 6) * shadowOffsetX * -1 +
			      "px " +
			      (3 / 6) * shadowOffsetY * -1 +
			      "px 13.6px rgba(0, 0, 0, 0.09), " +
			      (4 / 6) * shadowOffsetX * -1 +
			      "px " +
			      (4 / 6) * shadowOffsetY * -1 +
			      "px 24.3px rgba(0, 0, 0, 0.107), " +
			      (5 / 6) * shadowOffsetX * -1 +
			      "px " +
			      (5 / 6) * shadowOffsetY * -1 +
			      "px 45.5px rgba(0, 0, 0, 0.129), " +
			      shadowOffsetX * -1 +
			      "px " +
			      shadowOffsetY * -1 +
			      "px 109px rgba(0, 0, 0, 0.18)",
			    transform:
			      "perspective(1000px) rotateX(" +
			      -rotateX +
			      "deg) rotateY(" +
			      rotateY +
			      "deg)"
			  });

			  var glarePos = rotateX + rotateY + 90;
			  $(this)
			    .children()
			    .children()
			    .css("left", glarePos + "%");
			});

			$(".card").mouseleave(function (e) {
			  $(".card").css({"box-shadow": "0px 0px 3px rgba(0, 0, 0, 0.051), 0px 0px 7.2px rgba(0, 0, 0, 0.073), 0px 0px 13.6px rgba(0, 0, 0, 0.09), 0px 0px 24.3px rgba(0, 0, 0, 0.107), 0px 0px 45.5px rgba(0, 0, 0, 0.129), 0px 0px 109px rgba(0, 0, 0, 0.18)", "transform": "scale(1.0)"});
			  $(".glare").css("left", "100%");
			});
		</script>
	</body>
</html>
